<template>
  <div id="LoanResults">
    <img src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/2(1).jpg" class="banner" alt="">
    <div class="inner">
      <van-divider class="title">安居贷特点</van-divider>
      <div class="list">
        <p v-for="(item,index) in list" :key="index">
          <span> {{item.name}} </span> {{item.value}}
        </p>
      </div>
      <div class="info" v-if="this.$route.query.type!=='结果'">
        <template v-if="this.$route.query.type=='评估'">
          我行已收到您的贷款额度评估申请，我们将在xx个工作日内反馈您的可贷款额度！
        </template>
        <template v-else-if="this.$route.query.type=='申请'">
          我行已收到您的贷款申请，将在3个工作日内联系您，为您审批放款！
        </template>
      </div>
      <div class="bottom">
        <van-button type="info" size="normal" round :color="$route.query.type=='评估'?'#C6C6C6':''">
          <template v-if="this.$route.query.type=='评估'">
            发起贷款申请
          </template>
          <template v-else-if="this.$route.query.type=='申请'">
            发起贷款申请
          </template>
          <template v-else>
            已发起贷款申请
          </template>
        </van-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "LoanResults",
  data() {
    return {
      formData: {},
      list: [{
        name: "对象主题",
        value: "建房审批通过的农户"
      }, {
        name: "可贷款额度",
        value: "评估中"
      }, {
        name: "还款方式",
        value: "按月还款"
      }, {
        name: "计息方式",
        value: "按实际用款时间计息"
      },

      ]
    }
  },
  mounted() {
    this.formData = JSON.parse(this.$route.query.data)
    if (this.$route.query.type == '申请') {
      this.list[1].value = this.formData.loanLimit
    }
    if (this.$route.query.type == '结果') {
      this.list.push({
        name: "进度",
        value: "审批中/贷款未通过/贷款成功"
      }, {
        name: "实际贷款额度",
        value: "56万"
      })
    }
  }
}
</script>
<style lang="scss" scoped>
#LoanResults {
  width: 100%;
  height: 100vh;
  position: relative;
  .banner {
    width: 100%;
    height: 300px;
  }
  .inner {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: calc(100% - 280px);
    background: #ffffff;
    border-radius: 34px 34px 0px 0px;
    padding: 0 10px;
    .title {
      color: #363636;
      font-size: 20px;
      font-weight: bold;
      border-color: #767676;
      padding: 10px 50px;
      //   border-width: 2px;
    }
    .list {
      padding: 10px;
      p {
        font-size: 16px;
        line-height: 40px;
        font-weight: 400;
        span {
          margin-right: 20px;
          color: #dba00f;
        }
      }
    }
  }
  .info {
    background: #e4e4e4;
    border-radius: 20px;
    padding: 10px;
    font-size: 20;
    font-weight: bold;
    color: #232323;
    line-height: 30px;
    text-align: center;
  }
  .bottom {
    width: 100%;
    text-align: center;
    padding: 10px;
    position: fixed;
    bottom: 0;
    .van-button {
      width: 100%;
    }
  }
}
</style>